<script setup>
import bag from "../assets/mybag/bag-container.png";
import cardPic from "../assets/mybag/cardBg.png";
import myMealBg from "../assets/myMeal.png";
import meal_cover from "../assets/meal_cover.png";
import video_cover from "../assets/video_cover.png";
import { useI18n } from "vue-i18n";
import { http } from "../services/service";
import { ref, computed } from "vue";
import cardList from "./components/cardList.vue";
import { useUserStore } from "../store/index";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const back = () => {
  router.go(-1);
};
const i18nUse = useI18n();
const store = useUserStore();
const email = ref(store.getUser?.email);
const password = ref("");
const rePassword = ref("");
const verification_code = ref("");
const isDisposed = ref(false);
const handleTimeChange = () => {
  if (time.value <= 0) {
    isDisposed.value = false;
    time.value = 60;
  } else {
    setTimeout(() => {
      time.value--;
      handleTimeChange();
    }, 1000);
  }
};
import i18n from "../i18n/lang/index";
const isEN = computed(() => {
  return i18n.global.locale !== "zhCn";
});
const secondsTxt = computed(() => {
  return isEN.value ? time.value + "s" : time.value;
});
const sendCode = () => {
  if (!email.value) {
    showToast(i18nUse.t("email_warning"));
    return;
  }
  http
    .get(`/api/v1/index/sendSetPayPassEmailCode?email=${email.value}`)
    .then((response) => {
      showToast(i18nUse.t("code_send_success"));
      isDisposed.value = true;
      handleTimeChange();
    })
    .catch((error) => {
      console.error(error);
    });
};

const time = ref(60);
const confirm = () => {
  if (password.value !== rePassword.value) {
    showToast(i18nUse.t("password_match"));
    return;
  }
  http
    .get(
      `/api/v1/index/setPayPass?telegramId=${store.getUser?.telegramId}&emailCode=${verification_code.value}&pass1=${password.value}&pass2=${rePassword.value}`
    )
    .then((response) => {
      if (response.data.code === 200) {
        showToast(i18nUse.t("set_success"));
        back();
      } else {
        showToast(response.data.message);
      }
    })
    .catch((error) => {
      console.error(error);
    });
};
</script>
<template>
  <div class="container">
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("trade_password") }}
    </div>
    <div class="withDraw">
      <van-field
        v-model="email"
        readonly="readonly"
        :label="$t('email')"
        placeholder=""
      />
      <van-button
        color="#4A61F9"
        class="code-btn"
        :disabled="isDisposed"
        @click="sendCode()"
      >
        {{ isDisposed ? secondsTxt : $t("Send") }}
      </van-button>
      <van-field
        v-model="verification_code"
        :label="$t('verification_code')"
        placeholder=""
      />
      <van-field
        v-model="password"
        type="password"
        :maxlength="6"
        :label="$t('trade_password')"
        placeholder=""
      />
      <van-field
        v-model="rePassword"
        type="password"
        :maxlength="6"
        :label="$t('trade_password_enter')"
        placeholder=""
      />
    </div>
    <div class="confirm">
      <van-button type="primary" block @click="confirm()"
        >{{ $t("confirm") }}
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.confirm {
  width: 70%;
  margin: 20px auto;
  button {
    background-image: linear-gradient(to right, #9ba8ff, #4a61f9);
    border-radius: 10px;
  }
}
.withDraw {
  width: 341px;
  margin: 40px auto 0 auto;
  background: rgba(44, 47, 61, 0.7);
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  min-height: 40px;
  position: relative;
  .code-btn {
    height: 24px;
    position: absolute;
    top: 11px;
    right: 20px;
    z-index: 100;
  }
  .van-cell {
    background-color: unset !important;
    color: #fff !important;

    .van-cell__title {
      color: #fff !important;
    }
  }

  .van-cell__title {
    color: #fff !important;
  }
}
.container-score {
  width: 90%;
  margin: 40px auto;
  height: 70px;
  display: flex;
  box-sizing: border-box;
  padding: 22px;
  border: 1px solid #9aa7ff;
  border-radius: 10px;
  background: rgba(48, 55, 90, 0.6);
  align-items: center;
  justify-content: space-between;
}

.withDrawDialog {
  padding: 40px;
  font-size: 16px;
  .img-cover {
    width: 80px;
    height: 80px;
  }
  .upload-container {
    color: #595c67;
    border-bottom: 1px solid #595c67;
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.container-tab {
  margin-top: 30px;
}

.myMealBg {
  width: 80%;
  margin: 40px auto;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
